<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:insert="~{include :: header('新增图片')}" />
</head>
<body class="hold-transition">
<div class="container-fluid mt-2 mb-3">
    <form class="form-horizontal m" id="form-picture-album-edit" th:object="${pictureAlbum}">
        <div class="form-group row">
            <label class="col-sm-2 col-form-label is-required text-sm-right">分类</label>
            <div class="col-sm-2">
                <input id="categoryId" name="categoryId" th:value="*{categoryId}" type="hidden"/>
                <input class="form-control" type="text" id="categoryName" placeholder="请选择分类" readonly="readonly" th:value="*{categoryName}">
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label is-required text-sm-right">标题</label>
            <div class="col-sm-6">
                <input id="title" name="title" th:field="*{title}" class="form-control" placeholder="请输入标题名称" type="text" required>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label text-sm-right">简介</label>
            <div class="col-sm-9">
                <textarea id="intro" name="intro" th:text="*{intro}" rows="6" class="form-control"></textarea>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label is-required text-sm-right">浏览量</label>
            <div class="col-sm-2">
                <input name="viewCount" th:value="*{viewCount}" class="form-control" value="0" type="text" required>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label is-required text-sm-right">属性</label>
            <div class="col-sm-2 pt-2">
                <label for="isElite"><input type="checkbox" value="1" name="isElite" id="isElite" th:checked="*{isElite==1}"> 推荐</label>
                &nbsp;&nbsp;&nbsp;
                <label for="isTop"><input type="checkbox" value="1" name="isTop" id="isTop" th:checked="*{isTop==1}"> 固顶</label>
            </div>
        </div>
        <div class="row">
            <label class="col-sm-2"></label>
            <div class="col-sm-10">
                <input name="id" th:value="*{id}"  type="hidden"/>
                <button type="button" class="btn btn-primary" onclick="submitPicture()"><i class="fa fa-check"></i>保 存</button>&nbsp;
                <button type="button" class="btn btn-danger" onclick="parent.layer.closeAll()"><i class="fa fa-reply-all"></i>关 闭 </button>
            </div>
        </div>
    </form>
</div>
<th:block th:insert="~{include :: footer}" />
<script type="text/javascript">
    var prefix = "/picture/album";
    var channelId = [[${pictureAlbum.channelId}]];

    function setCategory(id, name) {
        $("#categoryId").val(id);
        $("#categoryName").val(name);
    }

    $(function() {
        /*分类-新增-选择父部门树*/
        $('#categoryName').click(function () {
            var options = {
                title: null,
                width: "380px",
                url: "/category/select.html?categoryId=" + $("#categoryId").val() + "&channelId=" + channelId,
                callBack: function (index, layero) {
                    var body = layer.getChildFrame('body', index);
                    setCategory(body.find('#categoryId').val(), body.find('#categoryName').val())
                    layer.close(index);
                }
            };
            $.modal.openOptions(options);
        });
    });

    function submitPicture() {
        var categoryId = $("#categoryId").val();
        if (categoryId.length < 1 || categoryId === "0") {
            return layer.msg("请先选择所属分类！");
        }
        if ($("#title").val().length < 3) {
            return layer.msg("请输入标题，且长度不能少于3个字符！");
        }
        if ($("#intro").val().length < 3) {
            return layer.msg("请输入专集简介，且长度不能少于3个字符！");
        }
        $.modal.loading();
        var data = $("#form-picture-album-edit").serializeArray();
        $.post(prefix + "/save.json", data, function (result) {
            $.modal.closeLoading();
            if (result.code === 0) {
                parent.location.reload();
            } else {
                $.modal.msgError(result.msg);
            }
        })
    }
</script>
</body>
</html>